<template>
  <div>
    <div>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="padding: 10px 0;">
      <el-input style="width: 200px" placeholder="请输入日期" suffix-icon="el-icon-date" @input="onInput()"></el-input>
      <el-input style="width: 200px" placeholder="请输入姓名" suffix-icon="el-icon-user-solid" class="ml-5"></el-input>
      <el-input style="width: 200px" placeholder="请输入地址" suffix-icon="el-icon-map-location" class="ml-5"></el-input>
      <el-button class="ml-5" type="success">搜索</el-button>
    </div>
    <div class="pd-10">
      <el-button type="warning">新增<i class="el-icon-circle-plus el-icon--right" style="font-size: 15px"></i></el-button>
      <el-button type="info">批量删除<i class="el-icon-delete-solid el-icon--right" style="font-size: 15px"></i></el-button>
      <el-button style="background-color: bisque">修改<i class="el-icon-setting el-icon--right"
                                                       style="font-size: 15px"></i></el-button>
      <el-button type="danger">导入<i class="el-icon-upload el-icon--right" style="font-size: 15px"></i></el-button>
      <el-button style="background-color: #42b983">导出<i class="el-icon-folder-remove el-icon--right"
                                                        style="font-size: 15px"></i></el-button>
    </div>
    <el-table :data="tableData" border header-row-style="el-table th"
              :header-cell-style="  { background: '#F0F0F1', height: '30px' ,fontSize:'15px',color:'#515a6e',fontweight:400}">
      <el-table-column prop="date" label="日期" width="140" align="center">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120" align="center">
      </el-table-column>
      <el-table-column prop="address" label="地址" align="center">
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="success">编辑<i class="el-icon-edit el-icon--right" style="font-size: 15px"></i></el-button>
          <el-button type="danger">删除<i class="el-icon-delete-solid el-icon--right" style="font-size: 15px"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style=" padding: 10px">
      <el-pagination
          :page-sizes="[5, 10, 15, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  methods: {
    onInput() {
      this.$forceUpdate();
    },

  },
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄',

    };
    return {
      tableData: Array(10).fill(item),

    }
  },
}



</script>

<style scoped>
.el-table th {
  background-color: #cccccc !important;
}
</style>
